<template>
  <div>
    <el-form ref="ModifyInfoForm" :rules="ModifyRules" :model="ModifyInfoForm" class="UserInfoContainer"
             label-width="80px">
      <el-form-item>
        <el-avatar :size="100" style="display:block;margin: 10px 110px"
                   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </el-form-item>
      <el-form-item label="用户名:" prop="userName">
        <el-col :span="20">
          <el-input v-model="ModifyInfoForm.userName"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="20">
          <el-input v-model="ModifyInfoForm.password" show-password></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-col :span="20">
          <el-input v-model="ModifyInfoForm.email"></el-input>
        </el-col>
      </el-form-item>
      <el-row>
        <el-button round type="success" @click="save" style="display:block;margin:0 auto">保存</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {messageInfo} from "@/utils/MessageInfo";
import {getUserInfo, modifyUserInfo} from "@/api/userApi";

export default {
  name: "ModifyInfoForm",
  data() {
    return {
      ModifyInfoForm: {
        id:'',
        userName: '',
        email: '',
        password: '',
        role: '',
        privilege: '',
      },

      ModifyRules: {
        userName: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],
        password: [{required: true, message: '新密码不能为空', trigger: 'blur'}]
      }

    }
  },
  methods: {
    save() {
      this.loading = true;
      modifyUserInfo({
        id: this.ModifyInfoForm.id,
        username: this.ModifyInfoForm.userName,
        password: this.ModifyInfoForm.password,
        email: this.ModifyInfoForm.email,
        role: this.ModifyInfoForm.role === '管理员' ? 1 : 0,
        privilege: this.ModifyInfoForm.privilege
      }).then((res) => {
        if (res) {//请求成功的相应值
          console.log(res)
          this.loading = false;
          this.$router.push("/home/userInfo");
          messageInfo({message: "修改成功！"});
        } else {
          this.loading = false;
        }
      })
    }
  },
  created() {
    getUserInfo(window.sessionStorage.getItem('token')).then(res => {
      this.ModifyInfoForm.id = res.result.id;
      this.ModifyInfoForm.userName = res.result.name;
      this.ModifyInfoForm.password = res.result.password;
      this.ModifyInfoForm.email = res.result.email;
      this.ModifyInfoForm.role = res.result.role==1?'管理员':'普通用户';
      this.ModifyInfoForm.privilege = res.result.privilege;
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style scoped>
.UserInfoContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 18px auto;
  width: 500px;
  padding: 20px 35px 20px 35px;
  background: #fff;
}

.Avatar {
  margin: auto;
}

.add_bu {
  margin: auto;
  min-width: 56px;
  min-height: 28px;
}

</style>